<template>
  <div>
      <h3>原来本身的样子：<span>{{msg}}</span></h3>
      <h3>使用计算属性翻转：<span>{{reverseMsg}}</span></h3>
      <h3>使用计算属性翻转：<span>{{reverseMsg}}</span></h3>
      <h3>使用计算属性翻转：<span>{{reverseMsg}}</span></h3>
      <hr>
      <h3>使用methods方法翻转：<span>{{getMsg()}}</span></h3>
      <h3>使用methods方法翻转：<span>{{getMsg()}}</span></h3>
      <h3>使用methods方法翻转：<span>{{getMsg()}}</span></h3>
     
  </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'Hello Kxs'
        }
    },
 
    computed:{
       
        reverseMsg(){
             console.log('计算属性执行了');
            return this.msg.split('').reverse().join('')
        }
    },
    methods:{
        getMsg(){
            console.log('函数执行了');
            return this.msg.split('').reverse().join('')
        }
    }
}
</script>

<style>
span {
    color: royalblue;
}
</style>